<template>
  <div class="m-refund-manage">
    <!-- 搜索 -->
    <form class="form-inline">
      <div class="form-group">
        <w-label :must="false">订单编号</w-label>
        <w-input v-model="params.orderId" :validate="false"></w-input>
      </div>
      <div class="form-group">
        <w-label :must="false">买家手机号</w-label>
        <w-input v-model="params.userPhone" :validate="false"></w-input>
      </div>
      <w-button type="main" @on-click="searchByParams">搜索</w-button>
    </form>
    <!-- 筛选 -->
    <w-button-group>
      <w-button type="default" 
        v-for="(btn, index) in btns" 
        :key="index" 
        :class="{main: btnIndex === index}" 
        @on-click="onSelectOrder(btn, index)">{{btn.name}}</w-button>
    </w-button-group> 
    <!-- 内容列表 -->
    <list :list="refundList" @pass="passAudit" @reject="rejectAudit"></list>
    <!-- 分页 -->
    <w-paging v-show="totalPage > 1" :current="currentPage" :total="totalPage" @page="getNextPage"></w-paging>
  </div>
</template>

<script>
  import List from './list'
  import app from '../../main'
  import { apiRefund } from '../../common/api'

  export default {
    data() {
      return {
        btns: [
          {name: '全部', id: 1, status: ''},
          {name: '审核通过', id: 2, status: 1},
          {name: '审核拒绝', id: 3, status: 2},
          {name: '已退款', id: 4, status: 3}
        ],
        btnIndex: 0,

        // 每页展示的数据
        pageSize: 10,

        // 当前页
        currentPage: 1,

        // 订单状态
        status: '',

        // 总页数
        totalPage: 1,

        // 参数
        params: {
          accessToken: this.$store.getters.token,
          currentPage: 1,
          status: '',
          orderId: '',
          userPhone: '',
          pageSize: 10
        },

        // 退款记录
        refundList: []
      }
    },
    created() {
      this.handlerRefundList()
    },
    methods: {
      /**
       * 筛选按钮点击
       *
       * @param  { Object }  status   订单状态对象
       * @param  { Integer } index    当前是第几个索引
       */
      onSelectOrder(status, index) {
        this.btnIndex = index

        // 设置开始搜索第一页
        this.currentPage = 1

        // 设置订单状态
        this.params.status = status.status

        // 搜索退款列表
        this.handlerRefundList()
      },

      /**
       * 通过参数搜索
       * @return {[type]} [description]
       */
      searchByParams() {
        // 从第一页开始搜索
        this.params.currentPage = 1

        // 初始化为全部状态
        this.params.status = ''

        // 按钮选中全部
        this.btnIndex = 0

        // 搜索数据
        this.handlerRefundList()
      },

      /**
       * 获取退款列表数据
       */
      handlerRefundList() {
        apiRefund.getRefundList(this.params).then((data) => {
          // 将获取的值赋值到全局作用域
          this.refundList = data.list

          // 当前页
          this.currentPage = (data.currentPage || 1)

          // 总页数
          this.totalPage = (data.totalPage || 1)
        })
      },

      /**
       * 拒绝审核操作
       *
       * @param { Object } item 当前操作的对象
       */
      rejectAudit(item) {
        apiRefund.refuse(item.item.id, item.item.orderId, item.reason, this.$store.getters.token).then((data) => {
          // 弹框提示
          app.$toast('已经拒绝审核')

          // 处理成功后刷新列表
          this.handlerRefundList()
        })
      },

      /**
       * 通过审核操作
       *
       * @param { Object } item 当前操作的对象
       */
      passAudit(item) {
        apiRefund.pass(item.item.id, item.item.orderId, this.$store.getters.token).then((data) => {
          // 弹框提示
          app.$toast('已经通过审核')

          // 处理成功后刷新列表
          this.handlerRefundList()
        })
      },

      /**
       * 获取下一页
       *
       * @param { Number } page 当前页
       */
      getNextPage(page) {
        this.params.currentPage = page

        // 处理成功后刷新列表
        this.handlerRefundList()
      }
    },
    components: {
      List
    }
  }
</script>

<style lang="scss" scoped>
  .m-refund-manage {
    .btn-group {
      margin-top: 20px;
    }
  }
  .form-inline {
    margin: 20px 0;
  }
</style>